<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开心小可爱网站</title>
    <!-- 以下是把fullpage文件引入 -->
    <!-- 注意：要把这个fullpage文件放到index.css的上面 -->
    <link rel="stylesheet" href="css/fullpage.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 固定导航栏     这是第一个div  1111             ctrl + / -->
    <div class="header">
        <!-- 这是第二个div    2222 -->
        <div class="headercontent">
            <img src="images/logo1.png" alt=""
            width="300" height="73">
            <div class="nav">
                <a href="#">论坛</a>
                <a href="#">扩展</a>
                <a href="#">mac版</a>
            </div>
        </div>
    </div>
    <!-- 全屏滚动的代码 -->
    <!-- 要放在固定导航栏的下面 -->
    <div id="fullpage">
        
        <!-- 这是第一屏 -->
        <div class="section section1">
            <div class="title-box">
              <p>
                  小可爱，你准备好了吗？
              </p>
                  <a href="#"></a>
            </div>
            <img src="images/section1_bg(1).jpg" alt="">
            <!-- 这是第一个小球 -->
            <img src="images/ball1.png" alt=""
            class="ball1">
            <!-- 这是第二个小球 -->
            <img src="images/ball2.png" alt=""
            class="ball2">
            <img src="images/ship.png" alt=""
            class="ship">
        </div>
        <!-- 这是第二屏 -->
        <div class="section section2">
            <video muted autoplay loop>
                <source src="file:///D:/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/%E9%A1%B9%E7%9B%AE%E7%B1%BB%E5%9E%8B%E7%BC%96%E5%86%99/%E9%A1%B9%E7%9B%AE%E7%BC%96%E5%86%99/images/video1.mp4">
                请换个浏览器点我哦！
            </video> 
            <img src="./images/p1.jpeg" alt="" 
            class="xxeq1">
            <img src="./images/girl1.png" 
             class="essc1">
            <!-- 文字模块 -->
            <div class="word-content">
                <p class="bigword">这里百度一些文案</p>
                <div class="line"></div>
                <p class="midword">中体字文案</p>
                <p class="smallword">小字文案</p>
                <a href=""></a>
            </div>
        </div>
        <!-- 这是第三屏 -->
        <div class="section">Some section3</div>
        <div class="section">Some section4</div>
        <div class="section">Some section5</div>
    </div>
    <!-- 必须先引入 jquery 的js文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/fullpage.js"></script>
    <!-- 必须放到这里 -->
    <!-- 以下这个代码是引用插件的代码 -->
    <!-- <script>
        $(function () {
            $('#fullpage').fullpage({
                'navigation': true,
            });
        });
    </script> -->
    <script>
        $ (function () {
            $('#fullpage').fullpage( {
                'navigation':true,
                // 滚动到当前屏幕，文字模块渐渐显示出来
                afterload: function () {
                    $(this).find('.word-content').fadeIn();
                },
                // 离开当前屏幕，文字渐渐淡出
                onleave: function () {
                    $(this).find('.word-content').fadeOut();


                },
            });
        });
    </script>
</body>

</html>